<template>
	<!-- Use dynamic width and height based on the mode -->
	<ksp-cropper mode="fixed" :width="cropperWidth" :height="cropperHeight" :url="imgSrc" @cancel="cancelCrop"
		@ok="confirmCrop"></ksp-cropper>
</template>

<script>
export default {
	name: "ImageCropper",
	components: {},
	props: {
		imgSrc: {
			type: String,
			required: true,
		},
		mode: {
			type: String,
			default: "default", // Possible values: "default", "video"
		}
	},
	data() {
		return {
			cropperWidth: 300,
			cropperHeight: 300
		}
	},
	mounted() {
		// Set dimensions based on the mode
		this.setDimensions();
	},
	methods: {
		// Set cropper dimensions based on the mode
		setDimensions() {
			if (this.mode === "video" || this.mode === "topic") {
				// For video creation page
				this.cropperWidth = 608;
				this.cropperHeight = 1080;
			} else {
				// Default square ratio for other pages
				this.cropperWidth = 300;
				this.cropperHeight = 300;
			}
		},

		// 取消裁剪
		cancelCrop() {
			this.$emit("cancel")
		},

		// 完成裁剪
		confirmCrop(ev) {
			console.log(ev)
			// #ifdef H5 
			this.$emit("crop-success", {
				path: ev.base64,
			})
			// #endif

			// #ifdef APP-PLUS
			this.$emit("crop-success", {
				path: ev.path,
			})
			// #endif 

		},
	},
}
</script>

<style lang="scss" scoped>
.image-cropper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9999;
	display: flex;
	flex-direction: column;

	.cropper-container {
		flex: 1;
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;

		::v-deep .vue-cropper {
			width: 100%;
			height: 100%;

			.cropper-box {
				.cropper-view-box {
					border: 1px solid #fff;
					outline: 2000px solid rgba(0, 0, 0, 0.6);
				}
			}
		}
	}

	.action-top {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		box-sizing: border-box;

		.reset-icon {
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;

			i {
				color: #fff;
				font-size: 20px;
			}
		}

		.restore-btn {
			color: #fff;
			font-size: 14px;
			padding: 5px 10px;
		}
	}

	.action-bottom {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		box-sizing: border-box;

		.cancel-btn,
		.confirm-btn {
			color: #fff;
			font-size: 16px;
			padding: 10px 15px;
		}

		.confirm-btn {
			font-weight: bold;
		}
	}
}
</style>